<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery.js"></script>
</head>
<body>

    <input type="button" value="ajax" onclick="sendAjax()">
    <input type="button" value="ajax" onclick="sendAjax2()">
    <script>
        /*   
         CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
         它允许浏览器向跨源服务器，发出 XMLHttpRequest（AJAX）请求，从而克服了AJAX只能同源使用的限制。
         整个CORS通信过程，都是浏览器自动完成，不需要前端开发者参与。
         浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息(提示服务完成跨域验证)。
             > 1、客户端：浏览器会自动在请求头中添加一个Origin字段
             > 2、服务端：设置响应头 Access-Control-Allow-Origin ，允许指定域名的跨源请求
                  
 
         因此实现CORS通信的关键是服务器，只要服务器实现了CORS协议接口，就可以跨源通信。
 
         对于前端开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。
 
         CORS跨域依然使用的是 XMLHttpRequest 对象,只需要服务器完成支持即可,所以CORS跨域支持大数据参数的请求（文件上传） 
         
         */
        function sendAjax(){
            let xhr=new XMLHttpRequest();
            xhr.open("get","http://127.0.0.1:3000/cors/corsArea");
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }

        function sendAjax2(){
            $.ajax({
                url:"http://127.0.0.1:3000/cors/corsArea",
                method:"get",
                success:function(data){
                    console.log(data);
                }
            });
        }
         
     </script>
</body>
</html>